const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js',
  },
  // mobe: 'development',
  plugins: [new HtmlWebpackPlugin({
    template: './public/index.html'
  })],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
   
     {
    test: /\.(png|jpg|gif|jpeg)$/i,
    type: 'asset'
    },
    { // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      type: 'asset/resource',
      generator: {
          filename: 'font/[name].[hash:6][ext]'
      }
  },
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
        }
    }
},

    ],
    
  },
  devServer: {
    port: 3000 // 端口号
  },
};